<script>
import { MessageBox } from 'element-ui';
export default {
  props: {
    code: {
      //摄像头编号，传字符串单个播放，传数组批量播放
      type: [String, Array],
      required: true,
    },
    index: {
      //多个视频循环的索引或唯一标识
      type: [String, Number],
      default: () => 0,
    },
    width: {
      //盒子宽度
      type: String,
      default: "100",
    },
    height: {
      //盒子高度
      type: String,
      default: "100",
    },
    config: {
      type: Object,
      default: () => { }
    },
  },
  data() {
    return {
      g_iWndIndex: 0,
      g_szDeviceIdentify: "",
      g_bPTZAuto: false,
    };
  },
  methods: {
    /* 创建插件实例 */
    initPlugin() {
      const _this = this;
      WebVideoCtrl.I_InitPlugin({
        bDebugMode: true, // 是否开启调试
        cbSelWnd: function (xmlDoc) {
          _this.g_iWndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
        },
        cbInitPluginComplete: function () {
          WebVideoCtrl.I_InsertOBJECTPlugin("playWndMonitorVideo").then(() => {
            // 检查插件是否最新
            WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
              if (!bFlag) {
                // 获取配置信息
                _this.clickLogin();
              }
            });
          }, () => {
            MessageBox.confirm("插件初始化失败，请确认是否已安装并启动插件；未安装点击下载！", "提示", {
              confirmButtonText: '下载',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              const a = document.createElement("a");
              a.href = "/media/HCWebSDKPlugin.exe";
              a.download = "HCWebSDKPlugin.exe";
              a.style.display = "none";
              document.body.appendChild(a);
              a.click();
            })
          });
        }
      });
    },
    // 登录
    clickLogin() {
      const _this = this;
      const { cameraIpAddress, cameraPort, cameraUsername, cameraPassword } = this.config;
      // 增加参数验证
      if (!cameraIpAddress || !cameraPort || !cameraUsername || !cameraPassword) {
        console.error('摄像头配置参数不完整:', this.config);
        return;
      }

      // 打印登录信息便于调试
      console.log('正在尝试登录:', {
        ip: cameraIpAddress,
        port: cameraPort,
        username: cameraUsername
      });

      WebVideoCtrl.I_Login(cameraIpAddress, 1, cameraPort, cameraUsername, cameraPassword, {
        timeout: 5000, // 增加超时时间
        success: (xmlDoc) => {
          console.log('登录成功:', xmlDoc);
          _this.g_szDeviceIdentify = cameraIpAddress + "_" + cameraPort; // 保存设备标识

          // 登录成功后延时执行
          setTimeout(() => {
            _this.getChannelInfo();
          }, 100);

          setTimeout(() => {
            _this.clickStartRealPlay();
          }, 500);
        },
        error: (oError) => {
          console.error('登录失败:', {
            errorCode: oError.errorCode,
            errorMsg: oError.errorMsg,
            config: _this.config
          });

          // 根据错误码提供具体建议
          if (oError.errorCode === 404) {
            console.error('设备无法连接，请检查:',
              '\n1. IP地址是否正确',
              '\n2. 端口号是否正确',
              '\n3. 设备是否在线',
              '\n4. 网络是否互通'
            );
          }
        }
      });
    },
    // 获取通道
    getChannelInfo() {
      const { cameraIpAddress, cameraPort } = this.config;
      const szDeviceIdentify = cameraIpAddress + "_" + cameraPort;
      // 模拟通道
      WebVideoCtrl.I_GetAnalogChannelInfo(szDeviceIdentify, {
        success: function (xmlDoc) {
          console.log(szDeviceIdentify + " 获取模拟通道成功！");
        },
        error: function (oError) {
          console.log(szDeviceIdentify + " 获取模拟通道失败！", oError.errorCode, oError.errorMsg);
        }
      });
      // 数字通道
      WebVideoCtrl.I_GetDigitalChannelInfo(szDeviceIdentify, {
        success: function (xmlDoc) {
          console.log(szDeviceIdentify + " 获取数字通道成功！");
        },
        error: function (oError) {
          console.log(szDeviceIdentify + " 获取数字通道失败！", oError.errorCode, oError.errorMsg);
        }
      });
      // 零通道
      WebVideoCtrl.I_GetZeroChannelInfo(szDeviceIdentify, {
        success: function (xmlDoc) {
          console.log(szDeviceIdentify + " 获取零通道成功！");
        },
        error: function (oError) {
          console.log(szDeviceIdentify + " 获取零通道失败！", oError.errorCode, oError.errorMsg);
        }
      });
    },
    // 开始预览
    clickStartRealPlay() {
      const { cameraIpAddress, cameraPort } = this.config;
      const szDeviceIdentify = cameraIpAddress + "_" + cameraPort;
      const oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex);
      var startRealPlay = function () {
        WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
          success: function () {
            console.log('预览成功')
          },
          error: function (oError) {
            console.log('oError', oError)
          }
        });
      };

      if (oWndInfo != null) {// 已经在播放了，先停止
        WebVideoCtrl.I_Stop({
          success: function () {
            startRealPlay();
          }
        });
      } else {
        startRealPlay();
      }
    },
    // PTZ控制 9为自动，1,2,3,4,5,6,7,8为方向PTZ
    mouseDownPTZControl(iPTZIndex) {
      const _this = this;
      const oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex);
      const iPTZSpeed = 4;
      console.log('this.g_iWndIndex', this.g_iWndIndex)
      console.log('oWndInfo', oWndInfo)
      if (oWndInfo != null) {
        if (9 == iPTZIndex && this.g_bPTZAuto) {
          iPTZSpeed = 0;// 自动开启后，速度置为0可以关闭自动
        } else {
          this.g_bPTZAuto = false;// 点击其他方向，自动肯定会被关闭
        }
        WebVideoCtrl.I_PTZControl(iPTZIndex, false, {
          iPTZSpeed: iPTZSpeed,
          success: function (xmlDoc) {
            if (9 == iPTZIndex && _this.g_bPTZAuto) {
              console.log(oWndInfo.szDeviceIdentify + " 停止云台成功！");
            } else {
              console.log(oWndInfo.szDeviceIdentify + " 开启云台成功！");
            }
            if (9 == iPTZIndex) {
              _this.g_bPTZAuto = !_this.g_bPTZAuto;
            }
          },
          error: function (oError) {
            console.log('oError', oError)
          }
        });
      }
    },

    // 方向PTZ停止
    mouseUpPTZControl() {
      const oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex);
      if (oWndInfo != null) {
        WebVideoCtrl.I_PTZControl(1, true, {
          success: function (xmlDoc) {
            console.log(oWndInfo.szDeviceIdentify + " 停止云台成功！");
          },
          error: function (oError) {
            console.log(oWndInfo.szDeviceIdentify + " 停止云台失败！", oError.errorCode, oError.errorMsg);
          }
        });
      }
    },
    PTZZoomIn() {
      const oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex);
      if (oWndInfo != null) {
        WebVideoCtrl.I_PTZControl(10, false, {
          iWndIndex: this.g_iWndIndex,
          success: function (xmlDoc) {
            console.log(oWndInfo.szDeviceIdentify + " 调焦+成功！");
          },
          error: function (oError) {
            console.log(oWndInfo.szDeviceIdentify + "  调焦+失败！", oError.errorCode, oError.errorMsg);
          }
        });
      }
    },

    PTZZoomout() {
      const oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex);
      if (oWndInfo != null) {
        WebVideoCtrl.I_PTZControl(11, false, {
          iWndIndex: this.g_iWndIndex,
          success: function (xmlDoc) {
            console.log(oWndInfo.szDeviceIdentify + " 调焦-成功！");
          },
          error: function (oError) {
            console.log(oWndInfo.szDeviceIdentify + "  调焦-失败！", oError.errorCode, oError.errorMsg);
          }
        });
      }
    },

    PTZZoomStop() {
      const oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex);
      if (oWndInfo != null) {
        WebVideoCtrl.I_PTZControl(11, true, {
          iWndIndex: this.g_iWndIndex,
          success: function (xmlDoc) {
            console.log(oWndInfo.szDeviceIdentify + " 调焦停止成功！");
          },
          error: function (oError) {
            console.log(oWndInfo.szDeviceIdentify + "  调焦停止失败！", oError.errorCode, oError.errorMsg);
          }
        });
      }
    },

    PTZFocusIn() {
      const oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex);
      if (oWndInfo != null) {
        WebVideoCtrl.I_PTZControl(12, false, {
          iWndIndex: this.g_iWndIndex,
          success: function (xmlDoc) {
            console.log(oWndInfo.szDeviceIdentify + " 聚焦+成功！");
          },
          error: function (oError) {
            console.log(oWndInfo.szDeviceIdentify + "  聚焦+失败！", oError.errorCode, oError.errorMsg);
          }
        });
      }
    },

    PTZFoucusOut() {
      const oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex);
      if (oWndInfo != null) {
        WebVideoCtrl.I_PTZControl(13, false, {
          iWndIndex: this.g_iWndIndex,
          success: function (xmlDoc) {
            console.log(oWndInfo.szDeviceIdentify + " 聚焦-成功！");
          },
          error: function (oError) {
            console.log(oWndInfo.szDeviceIdentify + "  聚焦-失败！", oError.errorCode, oError.errorMsg);
          }
        });
      }
    },

    PTZFoucusStop() {
      const oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex);
      if (oWndInfo != null) {
        WebVideoCtrl.I_PTZControl(12, true, {
          iWndIndex: this.g_iWndIndex,
          success: function (xmlDoc) {
            console.log(oWndInfo.szDeviceIdentify + " 聚焦停止成功！");
          },
          error: function (oError) {
            console.log(oWndInfo.szDeviceIdentify + "  聚焦停止失败！", oError.errorCode, oError.errorMsg);
          }
        });
      }
    },

    PTZIrisIn() {
      const oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex);
      if (oWndInfo != null) {
        WebVideoCtrl.I_PTZControl(14, false, {
          iWndIndex: this.g_iWndIndex,
          success: function (xmlDoc) {
            console.log(oWndInfo.szDeviceIdentify + " 光圈+成功！");
          },
          error: function (oError) {
            console.log(oWndInfo.szDeviceIdentify + "  光圈+失败！", oError.errorCode, oError.errorMsg);
          }
        });
      }
    },

    PTZIrisOut() {
      const oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex);
      if (oWndInfo != null) {
        WebVideoCtrl.I_PTZControl(15, false, {
          iWndIndex: this.g_iWndIndex,
          success: function (xmlDoc) {
            console.log(oWndInfo.szDeviceIdentify + " 光圈-成功！");
          },
          error: function (oError) {
            console.log(oWndInfo.szDeviceIdentify + "  光圈-失败！", oError.errorCode, oError.errorMsg);
          }
        });
      }
    },

    PTZIrisStop() {
      const oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex);
      if (oWndInfo != null) {
        WebVideoCtrl.I_PTZControl(14, true, {
          iWndIndex: this.g_iWndIndex,
          success: function (xmlDoc) {
            console.log(oWndInfo.szDeviceIdentify + " 光圈停止成功！");
          },
          error: function (oError) {
            console.log(oWndInfo.szDeviceIdentify + "  光圈停止失败！", oError.errorCode, oError.errorMsg);
          }
        });
      }
    },
    destroyPlugin() {
      this.clickPause();
      this.clickLogout();
      WebVideoCtrl.I_DestroyPlugin().then(() => {
        console.log('清除成功！')
      }).catch(() => {
        console.log('清除失败！')
      })
    },
    clickPause() {
      const oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex);
      let szInfo = "";

      if (oWndInfo != null) {
        WebVideoCtrl.I_Pause({
          success: function () {
            szInfo = "暂停成功！";
            console.log(oWndInfo.szDeviceIdentify + " " + szInfo);
          },
          error: function (oError) {
            szInfo = "暂停失败！";
            console.log(oWndInfo.szDeviceIdentify + szInfo, oError.errorCode, oError.errorMsg);
          }
        });
      }
    },
    clickLogout() {
      if (!this.g_szDeviceIdentify) return
      WebVideoCtrl.I_Logout(this.g_szDeviceIdentify).then(() => {
        console.log(this.szDeviceIdentify + " " + "退出成功！");
      }, () => {
        console.log(this.szDeviceIdentify + " " + "退出失败！");
      });
    },
    showPlugin() {
      WebVideoCtrl.I_ShowPlugin().then(() => {
        console.log('展示成功！')
      }).catch(() => {
        console.log('展示失败！')
      })

    },
    hidPlugin() {
      WebVideoCtrl.I_HidPlugin().then(() => {
        console.log('隐藏成功！')
      }).catch(() => {
        console.log('隐藏失败！')
      })
    },
  },
};
</script>

<template>
  <!-- 视频监控 -->
  <div class="videoContent" :style="{
    width,
    height,
  }">
    <div id="playWndMonitorVideo" class="playWnd"></div>
  </div>
</template>

<style lang="scss" scoped>
/* 如果出警告不用管，原生css已支持这种层级写法无需安装css预编译器 */
.videoContent {
  border-radius: 4px;
  position: relative;

  .playWnd {
    width: 100%;
    height: 100%;
  }
}
</style>
